//colors
$color_manatee_30_approx: rgba(144,147,153,.3);
$color_manatee_50_approx: rgba(144,147,153,.5);

.el-scrollbar {
  overflow: hidden;
  position: relative;
  &:active > .el-scrollbar__bar {
    opacity: 1;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: opacity 340ms ease-out;
  }
  &:focus > .el-scrollbar__bar {
    opacity: 1;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: opacity 340ms ease-out;
  }
  &:hover > .el-scrollbar__bar {
    opacity: 1;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: opacity 340ms ease-out;
  }
}
.el-scrollbar__wrap {
  overflow: scroll;
  height: 100%;
}
.el-scrollbar__wrap--hidden-default {
  scrollbar-width: none;
}
.el-scrollbar__wrap--hidden-default::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.el-scrollbar__thumb {
  position: relative;
  display: block;
  width: 0;
  height: 0;
  cursor: pointer;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: inherit;
  background-color: $color_manatee_30_approx;
  //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
  transition: .3s background-color;
  &:hover {
    background-color: $color_manatee_50_approx;
  }
}
.el-scrollbar__bar {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 1;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 4px;
  opacity: 0;
  //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
  transition: opacity 120ms ease-out;
  &.is-vertical {
    width: 6px;
    top: 2px;
    > div {
      width: 100%;
    }
  }
  &.is-horizontal {
    height: 6px;
    left: 2px;
    > div {
      height: 100%;
    }
  }
}
